import {createRouter,createWebHistory} from "vue-router";
// 1.定义路由信息 什么路径对应什么组件
const routes = [
    {path:'/',redirect:'index'},
    {path:'/login',name:'login',component:()=>import("../pages/Login.vue")},
    {path:"/index",name:'index',component:()=>import("../pages/Index.vue"),
        // beforeEnter:(to,from) =>{
        //     console.log("路由独享守卫");
        //     console.log(to);
        //     console.log(from);
        //     return true; // 允许导航
        // }
    },
    {path:'/userList',name:'userList',component:()=> import("../pages/UserList.vue"),
        children:[
            // 绝对路径 :
            // 路由传参 1.在路径上指定参数的key 2.开启props属性 true  3.接收传参的组件需要使用props接受
            {path:'/userList/userUpdate/:id',name:'userUpdate',props:true,component:()=>import("../pages/UserUpdate.vue")},
            // 相对路径
            {path:'userUpdate/:id',name:'userUpdate',props:true,component:()=>import("../pages/UserUpdate.vue")},
            {path:'uploadFile',name:'uploadFile',component:()=>import("../pages/UploadFile.vue")}
        ]
    },
    {path:'/userAdd',name:'userAdd',component:()=>import("../pages/UserAdd.vue")}
]

// 2.创建路由对象 指定历史模式 指定 路由信息
const router = createRouter({
    history:createWebHistory(),
    routes
})
// 路由导航守卫
// 前置导航守卫  跳转导航之前执行
// 参数是一个箭头函数  这个函数 有三个参数 to 去到那个路由 from 从哪个路由来 next 这是一个函数表示是否放行
router.beforeEach((to,from,next)=>{
    // console.log("前置守卫执行了")
    // console.log(to)
    // console.log(from)
    // 可以做一些逻辑判断 决定是否放行  可以做登录拦截: 如果用户登录了 就可以访问后续页面 如果没有登录 可以强制跳转
    let token = sessionStorage.getItem("token")
    if(to.path == '/login'){
        next()
    }else{
        if(token != null){
            // 登录成功
            next()
        }else{
            // 没有登录 强制跳转到 login
            next({
                path:'/login'
                // name:'login'
            })
        }
    }

})
// 后置守卫 跳转到导航之后执行
// router.afterEach((to,from)=>{
//     console.log("后置守卫执行了")
//     console.log(to)
//     console.log(from)
// })

// 3.导出路由
export default router